<template>
  <div>
    <el-row type="flex">
      <el-col class="formWarp" :span="24" style="margin-left:10px;" :style="{ height: heightTree }">
        <h2 style="text-align:center;font-size:30px;">大 组 工 网 管 理 人 员 备 案 表</h2>
        <div class="infohead">
          <p>填报单位:(盖章)<input v-model="fillingOrg" class="inputVal"/></p>
          <p>填表人:<input v-model="fillingPerson" class="inputVal"/></p>
          <p>联系方式:<input v-model="fillingTel" class="inputVal"/></p>
        </div>
        <div  :style="{ height: heightTable }" style="overflow-y:scroll;margin-top:10px;">
           <table border="1" class="myTable">
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  一、大组工网网络安全管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td><el-input v-model="netSafeAdminName"/></td>
                <td><el-input v-model="netSafeAdminPost"/></td>
                <td><el-input v-model="netSafeAdminDepartment"/></td>
                <td><el-input v-model="netSafeAdminTel"/></td>
                <td><el-input v-model="netSafeAdminPhone"/></td>
              </tr>
              <tr>
                <td>安全保密管理员</td>
                <td><el-input v-model="netSafeSecrecyName"/></td>
                <td><el-input v-model="netSafeSecrecyPost"/></td>
                <td><el-input v-model="netSafeSecrecyDepartment"/></td>
                <td><el-input v-model="netSafeSecrecyTel"/></td>
                <td><el-input v-model="netSafeSecrecyPhone"/></td>
              </tr>
              <tr>
                <td>安全审计员</td>
                <td><el-input v-model="netSafeAuditName"/></td>
                <td><el-input v-model="netSafeAuditPost"/></td>
                <td><el-input v-model="netSafeAuditDepartment"/></td>
                <td><el-input v-model="netSafeAuditTel"/></td>
                <td><el-input v-model="netSafeAuditPhone"/></td>
              </tr>
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  二、大组工网网站管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td><el-input v-model="netManagerAdminName"/></td>
                <td><el-input v-model="netManagerAdminPost"/></td>
                <td><el-input v-model="netManagerAdminDepartment"/></td>
                <td><el-input v-model="netManagerAdminTel"/></td>
                <td><el-input v-model="netManagerAdminPhone"/></td>
              </tr>
              <tr>
                <td>安全保密管理员</td>
                <td><el-input v-model="netManagerSecrecyName"/></td>
                <td><el-input v-model="netManagerSecrecyPost"/></td>
                <td><el-input v-model="netManagerSecrecyDepartment"/></td>
                <td><el-input v-model="netManagerSecrecyTel"/></td>
                <td><el-input v-model="netManagerSecrecyPhone"/></td>
              </tr>
              <tr>
                <td>安全审计员</td>
                <td><el-input v-model="netManagerAuditName"/></td>
                <td><el-input v-model="netManagerAuditPost"/></td>
                <td><el-input v-model="netManagerAuditDepartment"/></td>
                <td><el-input v-model="netManagerAuditTel"/></td>
                <td><el-input v-model="netManagerAuditPhone"/></td>
              </tr>
              <tr>
                 <td colspan="6" style="text-align: left; font-size: 18px">
                  三、省委组织部大组工网电子邮件系统管理人员配备情况
                 </td>
              </tr>
              <tr>
                <td>人员类型</td>
                <td>姓名</td>
                <td>职务</td>
                <td>部门</td>
                <td>办公电话</td>
                <td>手机号码</td>
              </tr>
              <tr>
                <td>系统管理员</td>
                <td><el-input v-model="netEamilAdminName"/></td>
                <td><el-input v-model="netEamilAdminPost"/></td>
                <td><el-input v-model="netEamilAdminDepartment"/></td>
                <td><el-input v-model="netEamilAdminTel"/></td>
                <td><el-input v-model="netEamilAdminPhone"/></td>
              </tr>
           </table>
        </div>
        <div style="background: #fff; float: right; height: 40px">
          <el-button type="primary" plain @click="handlSubmit" size="medium"
            >保  存</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getPersonList,getPersonSave,getPersonUpdate} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
export default {
  data() {
    return {
      fillingOrg:"",
      fillingPerson:"",
      fillingTel:"",
      netSafeAdminName:"",
      netSafeAdminPost:"",
      netSafeAdminDepartment:"",
      netSafeAdminTel:"",
      netSafeAdminPhone:"",
      netSafeSecrecyName:"",
      netSafeSecrecyPost:"",
      netSafeSecrecyDepartment:"",
      netSafeSecrecyTel:"",
      netSafeSecrecyPhone:"",
      netSafeAuditName:"",
      netSafeAuditPost:"",
      netSafeAuditDepartment:"",
      netSafeAuditTel:"",
      netSafeAuditPhone:"",
      netManagerAdminName:"",
      netManagerAdminPost:"",
      netManagerAdminDepartment:"",
      netManagerAdminTel:"",
      netManagerAdminPhone:"",
      netManagerSecrecyName:"",
      netManagerSecrecyPost:"",
      netManagerSecrecyDepartment:"",
      netManagerSecrecyTel:"",
      netManagerSecrecyPhone:"",
      netManagerAuditName:"",
      netManagerAuditPost:"",
      netManagerAuditDepartment:"",
      netManagerAuditTel:"",
      netManagerAuditPhone:"",
      netEamilAdminName:"",
      netEamilAdminPost:"",
      netEamilAdminDepartment:"",
      netEamilAdminTel:"",
      netEamilAdminPhone:"",
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 290 + "px",
      defaultProps: {
        children: "children",
        label: "label",
      },
      id:"",
    };
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
       const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           data:{
            status:"1",
           }
       }
       getPersonList(params).then((result) =>{
          if(result.result){
            this.id = result.resultdata[0].id
            this.fillingOrg=result.resultdata[0].fillingOrg
            this.fillingPerson=result.resultdata[0].fillingPerson
            this.fillingTel=result.resultdata[0].fillingTel
            this.netSafeAdminName=result.resultdata[0].netSafeAdminName
            this.netSafeAdminPost=result.resultdata[0].netSafeAdminPost
            this.netSafeAdminDepartment=result.resultdata[0].netSafeAdminDepartment
            this.netSafeAdminTel=result.resultdata[0].netSafeAdminTel
            this.netSafeAdminPhone=result.resultdata[0].netSafeAdminPhone
            this.netSafeSecrecyName=result.resultdata[0].netSafeSecrecyName
            this.netSafeSecrecyPost=result.resultdata[0].netSafeSecrecyPost
            this.netSafeSecrecyDepartment=result.resultdata[0].netSafeSecrecyDepartment
            this.netSafeSecrecyTel=result.resultdata[0].netSafeSecrecyTel
            this.netSafeSecrecyPhone=result.resultdata[0].netSafeSecrecyPhone
            this.netSafeAuditName=result.resultdata[0].netSafeAuditName
            this.netSafeAuditPost=result.resultdata[0].netSafeAuditPost
            this.netSafeAuditDepartment=result.resultdata[0].netSafeAuditDepartment
            this.netSafeAuditTel=result.resultdata[0].netSafeAuditTel
            this.netSafeAuditPhone=result.resultdata[0].netSafeAuditPhone
            this.netManagerAdminName=result.resultdata[0].netManagerAdminName
            this.netManagerAdminPost=result.resultdata[0].netManagerAdminPost
            this.netManagerAdminDepartment=result.resultdata[0].netManagerAdminDepartment
            this.netManagerAdminTel=result.resultdata[0].netManagerAdminTel
            this.netManagerAdminPhone=result.resultdata[0].netManagerAdminPhone
            this.netManagerSecrecyName=result.resultdata[0].netManagerSecrecyName
            this.netManagerSecrecyPost=result.resultdata[0].netManagerSecrecyPost
            this.netManagerSecrecyDepartment=result.resultdata[0].netManagerSecrecyDepartment
            this.netManagerSecrecyTel=result.resultdata[0].netManagerSecrecyTel
            this.netManagerSecrecyPhone=result.resultdata[0].netManagerSecrecyPhone
            this.netManagerAuditName=result.resultdata[0].netManagerAuditName
            this.netManagerAuditPost=result.resultdata[0].netManagerAuditPost
            this.netManagerAuditDepartment=result.resultdata[0].netManagerAuditDepartment
            this.netManagerAuditTel=result.resultdata[0].netManagerAuditTel
            this.netManagerAuditPhone=result.resultdata[0].netManagerAuditPhone
            this.netEamilAdminName=result.resultdata[0].netEamilAdminName
            this.netEamilAdminPost=result.resultdata[0].netEamilAdminPost
            this.netEamilAdminDepartment=result.resultdata[0].netEamilAdminDepartment
            this.netEamilAdminTel=result.resultdata[0].netEamilAdminTel
            this.netEamilAdminPhone=result.resultdata[0].netEamilAdminPhone
          }
       })
    },
    handlSubmit() {
      if(this.id == ""){
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            fillingOrg:this.fillingOrg,
            fillingPerson:this.fillingPerson,
            fillingTel:this.fillingTel,
            netSafeAdminName: this.netSafeAdminName,
            netSafeAdminPost:this.netSafeAdminPost,
            netSafeAdminDepartment: this.netSafeAdminDepartment,
            netSafeAdminTel:this.netSafeAdminTel,
            netSafeAdminPhone: this.netSafeAdminPhone,
            netSafeSecrecyName: this.netSafeSecrecyName,
            netSafeSecrecyPost: this.netSafeSecrecyPost,
            netSafeSecrecyDepartment: this.netSafeSecrecyDepartment,
            netSafeSecrecyTel: this.netSafeSecrecyTel,
            netSafeSecrecyPhone: this.netSafeSecrecyPhone,
            netSafeAuditName: this.netSafeAuditName,
            netSafeAuditPost: this.netSafeAuditPost,
            netSafeAuditDepartment:this.netSafeAuditDepartment,
            netSafeAuditTel:this.netSafeAuditTel,
            netSafeAuditPhone:this.netSafeAuditPhone,
            netManagerAdminName:this.netManagerAdminName,
            netManagerAdminPost:this.netManagerAdminPost,
            netManagerAdminDepartment: this.netManagerAdminDepartment,
            netManagerAdminTel: this.netManagerAdminTel,
            netManagerAdminPhone: this.netManagerAdminPhone,
            netManagerSecrecyName: this.netManagerSecrecyName,
            netManagerSecrecyPost:this.netManagerSecrecyPost,
            netManagerSecrecyDepartment:this.netManagerSecrecyDepartment,
            netManagerSecrecyTel:this.netManagerSecrecyTel,
            netManagerSecrecyPhone:this.netManagerSecrecyPhone,
            netManagerAuditName:this.netManagerAuditName,
            netManagerAuditPost:this.netManagerAuditPost,
            netManagerAuditDepartment:this.netManagerAuditDepartment,
            netManagerAuditTel:this.netManagerAuditTel,
            netManagerAuditPhone:this.netManagerAuditPhone,
            netEamilAdminName:this.netEamilAdminName,
            netEamilAdminPost:this.netEamilAdminPost,
            netEamilAdminDepartment:this.netEamilAdminDepartment,
            netEamilAdminTel:this.netEamilAdminTel,
            netEamilAdminPhone:this.netEamilAdminPhone,
          },
        };
        getPersonSave(params).then((result) => {
          if(result.result){
            this.$message({
                message: "操作成功",
                type: "success",
              });
            this.getList();
          }
        });
      }else if(this.id != null){
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            id: this.id,
            fillingOrg:this.fillingOrg,
            fillingPerson:this.fillingPerson,
            fillingTel:this.fillingTel,
            netSafeAdminName: this.netSafeAdminName,
            netSafeAdminPost:this.netSafeAdminPost,
            netSafeAdminDepartment: this.netSafeAdminDepartment,
            netSafeAdminTel:this.netSafeAdminTel,
            netSafeAdminPhone: this.netSafeAdminPhone,
            netSafeSecrecyName: this.netSafeSecrecyName,
            netSafeSecrecyPost: this.netSafeSecrecyPost,
            netSafeSecrecyDepartment: this.netSafeSecrecyDepartment,
            netSafeSecrecyTel: this.netSafeSecrecyTel,
            netSafeSecrecyPhone: this.netSafeSecrecyPhone,
            netSafeAuditName: this.netSafeAuditName,
            netSafeAuditPost: this.netSafeAuditPost,
            netSafeAuditDepartment:this.netSafeAuditDepartment,
            netSafeAuditTel:this.netSafeAuditTel,
            netSafeAuditPhone:this.netSafeAuditPhone,
            netManagerAdminName:this.netManagerAdminName,
            netManagerAdminPost:this.netManagerAdminPost,
            netManagerAdminDepartment: this.netManagerAdminDepartment,
            netManagerAdminTel: this.netManagerAdminTel,
            netManagerAdminPhone: this.netManagerAdminPhone,
            netManagerSecrecyName: this.netManagerSecrecyName,
            netManagerSecrecyPost:this.netManagerSecrecyPost,
            netManagerSecrecyDepartment:this.netManagerSecrecyDepartment,
            netManagerSecrecyTel:this.netManagerSecrecyTel,
            netManagerSecrecyPhone:this.netManagerSecrecyPhone,
            netManagerAuditName:this.netManagerAuditName,
            netManagerAuditPost:this.netManagerAuditPost,
            netManagerAuditDepartment:this.netManagerAuditDepartment,
            netManagerAuditTel:this.netManagerAuditTel,
            netManagerAuditPhone:this.netManagerAuditPhone,
            netEamilAdminName:this.netEamilAdminName,
            netEamilAdminPost:this.netEamilAdminPost,
            netEamilAdminDepartment:this.netEamilAdminDepartment,
            netEamilAdminTel:this.netEamilAdminTel,
            netEamilAdminPhone:this.netEamilAdminPhone,
          },
        };
        getPersonUpdate(params).then((result) => {
          if(result.result){
            this.$message({
                message: "操作成功",
                type: "success",
              });
            this.getList();
          }
        });
      }
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>
<style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp{
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
.infohead{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.infohead p{
  font-size:18px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-weight: lighter;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}

>>>.el-input--small .el-input__inner{
  border: none;
  text-align: center;
  font-size:16px;
  font-weight: lighter;
}
.myTable td {
  word-wrap: break-word;
  font-size: 18px;
  padding: 15px 10px;
  text-align: center;
}

</style>